<!DOCTYPE html>
<html>

<head>
    <title>{$Think.config.app_name}</title>
    {include file="public/head"/}
    <style>
        .layui-table-box {
            top: 0;
            bottom: 40px;
        }

        .layui-table-page {
            text-align: right;
            padding: 0px;
        }

        .btn_save {
            margin: 5px;
        }
    </style>
</head>

<body class="layui-layout-body">
    <div id="LAY_app" class="layadmin-tabspage-none">
        <div class="layui-layout layui-layout-admin root_box" v-cloak>
            <!-- 主体内容 -->
            <div class="layui-table-box">
                <div class="layui-table-body layui-table-main">
                    <table cellspacing="0" cellpadding="0" border="0" class="layui-table" width="100%">
                        <thead>
                            <tr>
                                <th class="layui-table-col-special">
                                    <div class="layui-table-cell" v-show="isSelectedAll">
                                        <div lay-skin="primary"
                                            class="layui-unselect layui-form-checkbox layui-form-checked"
                                            onclick="selectALL()"><i class="layui-icon layui-icon-ok"></i></div>
                                    </div>
                                    <div class="layui-table-cell" v-show="!isSelectedAll">
                                        <div lay-skin="primary" class="layui-unselect layui-form-checkbox"
                                            onclick="selectALL()"><i class="layui-icon layui-icon-ok"></i></div>
                                    </div>
                                </th>
                                <th>
                                    <div class="layui-table-cell">
                                        <span>ID</span>
                                    </div>
                                </th>
                                <th>
                                    <div class="layui-table-cell"><span>名称</span>
                                    </div>
                                </th>
                                <th>
                                    <div class="layui-table-cell "><span>地址</span>
                                    </div>
                                </th>
                                <th>
                                    <div class="layui-table-cell"><span>描述</span>
                                    </div>
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-show="list.length==0">
                                <td class="nodata" colspan="12">{{nomoredata}}</td>
                            </tr>
                            <template v-for="(item, index) in list">
                                <tr>
                                    <td class="layui-table-col-special">
                                        <div class="layui-table-cell" v-show="isSelected(item.node_id)">
                                            <div lay-skin="primary"
                                                class="layui-unselect layui-form-checkbox layui-form-checked"
                                                onclick="select(this)" :index="index" :primary_key="item.node_id"
                                                :pid="item.node_pid"><i class="layui-icon layui-icon-ok"></i></div>
                                        </div>
                                        <div class="layui-table-cell" v-show="!isSelected(item.node_id)">
                                            <div lay-skin="primary" class="layui-unselect layui-form-checkbox"
                                                onclick="select(this)" :index="index" :primary_key="item.node_id"
                                                :pid="item.node_pid"><i class="layui-icon layui-icon-ok"></i></div>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="layui-table-cell">{{item.node_id}}</div>
                                    </td>
                                    <td>
                                        <div class="layui-table-cell">{{item.node_title}}</div>
                                    </td>
                                    <td>
                                        <div class="layui-table-cell">
                                            {{item.node_module}}/{{item.node_controller}}/{{item.node_action}}</div>
                                    </td>
                                    <td>
                                        <div class="layui-table-cell">{{item.node_desc}}</div>
                                    </td>
                                </tr>
                                <template v-for="(subItem,subIndex) in item.sub">
                                    <tr>
                                        <td class="layui-table-col-special">
                                            <div class="layui-table-cell" v-show="isSelected(subItem.node_id)">
                                                <div lay-skin="primary"
                                                    class="layui-unselect layui-form-checkbox layui-form-checked"
                                                    onclick="select(this)" :index="subIndex"
                                                    :primary_key="subItem.node_id" :pid="subItem.node_pid"><i
                                                        class="layui-icon layui-icon-ok"></i></div>
                                            </div>
                                            <div class="layui-table-cell" v-show="!isSelected(subItem.node_id)">
                                                <div lay-skin="primary" class="layui-unselect layui-form-checkbox"
                                                    onclick="select(this)" :index="subIndex"
                                                    :primary_key="subItem.node_id" :pid="subItem.node_pid"><i
                                                        class="layui-icon layui-icon-ok"></i></div>
                                            </div>
                                        </td>
                                        <td>
                                            <div class="layui-table-cell">{{subItem.node_id}}</div>
                                        </td>
                                        <td>
                                            <div class="layui-table-cell"><i
                                                    class="iconfont icon-enter subItemIcon"></i> {{subItem.node_title}}
                                            </div>
                                        </td>
                                        <td>
                                            <div class="layui-table-cell">
                                                {{subItem.node_module}}/{{subItem.node_controller}}/{{subItem.node_action}}
                                            </div>
                                        </td>
                                        <td>
                                            <div class="layui-table-cell">{{subItem.node_desc}}</div>
                                        </td>
                                    </tr>
                                </template>
                            </template>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="layui-table-page">
                <a class="layui-btn layui-btn-sm btn_save" @click="submit">保存权限</a>
            </div>
        </div>
    </div>
</body>
{include file="public/foot"/}
<script>
    var app = new Vue({
        el: ".root_box",
        data: {
            list: [],
            nomoredata: "数据加载中",
            selectList: [],
            isSelectedAll: false,
            //上面的参数不允许删除
        },
        created: function () {
            $.post("/api/group/getAuthorize", Object.assign({
                "group_id": "{$group_id}"
            },PostCommon),
                function (data, status) {
                    if (data.code != 200) {
                        parent._alert(data.msg);
                    } else {
                        for (var i = 0; i < data.data.length; i++) {
                            app.selectList.push(data.data[i].auth_node);
                        }
                    }
                });
            this.getList();
        },
        methods: {
            isSelected: function (node_id) {
                return this.selectList.indexOf(node_id) >= 0 ? true : false;
            },
            time2string: function (timestamps) {
                return new Date(parseInt(timestamps) * 1000).Format("MM-dd hh:mm");
            },
            getList: function () {
                this.isSelectedAll = false;
                parent._loading();
                $.post("/api/node/lists", PostCommon,
                    function (data, status) {
                        parent._hideLoading();
                        if (data.code != 200) {
                            if (data.url) {
                                location.replace(data.url);
                            }
                            parent._alert(data.msg);
                            app.nomoredata = data.msg;
                        } else {
                            if (data.data.data.length == 0) {
                                app.nomoredata = "没有更多数据了";
                            }
                            app.list = data.data.data;
                        }
                    });
            },
            submit: function () {
                console.log(this.selectList);
                parent._loading();
                $.post("/api/group/authorize", Object.assign({
                    node_ids: this.selectList.join(','),
                    group_id:"{$group_id}"
                }, PostCommon), function (data, status) {
                    parent._hideLoading();
                    console.log(data);
                    if (data.code != 200) {
                        if (data.url) {
                            location.replace(data.url);
                        }
                        parent._alert(data.msg);
                    } else {
                        parent._alert("该用户组权限修改成功", "权限修改成功", function () {
                            parent.closewindow();
                        });
                    }
                });
            },
        }
    });

    function select(primary_key) {
        var index = parseInt($(primary_key).attr('index'));
        var pid = parseInt($(primary_key).attr('pid'));
        var primary_key = parseInt($(primary_key).attr('primary_key'));
        console.log(index);
        console.log(primary_key);
        if (app.selectList.indexOf(primary_key) >= 0) {
            app.selectList.splice(app.selectList.indexOf(primary_key), 1);
            // if(pid == 0){
            //     app.list[index].sub.forEach(function(subValue,subIndex){
            //         if(app.selectList.indexOf(subValue.node_id)>=0){
            //             app.selectList.splice(app.selectList.indexOf(subValue.node_id),1);
            //         }
            //     });
            // }
        } else {
            app.selectList.push(primary_key);
            // if(pid == 0){
            //     app.list[index].sub.forEach(function(subValue,subIndex){
            //         if(app.selectList.indexOf(subValue.node_id)<0){
            //             app.selectList.push(subValue.node_id);
            //         }
            //     });
            // }
        }
        console.log(JSON.parse(JSON.stringify(app.selectList)));
    }

    function selectALL() {
        app.selectList = [];
        if (!app.isSelectedAll) {
            app.list.forEach(function (value, index) {
                app.selectList.push(value.node_id);
                app.list[index].sub.forEach(function (subValue, subIndex) {
                    app.selectList.push(subValue.node_id);
                });
            });
        }
        app.isSelectedAll = !app.isSelectedAll;
    }
</script>

</html>